<template>
  <div id="SeaCollegeTabs">
    <div class="main tabs-nav-box" style="color: #333">
      <!-- exact -->
      <router-link
        v-for="tab in tabs"
        :key="tab.id"
        :to="tab.link"
        :class="{ isActive: isTabActive(tab) }"
      >
        {{ tab.name }}
      </router-link>
    </div>
  </div>
</template>

<script setup>
import { useRoute } from 'vue-router';

const route = useRoute();
const tabs = [
  { id: '7', name: '院校库', link: '/college' },
  { id: '6', name: '专业库', link: '/majorLibrary' },
  { id: '5', name: '职业库', link: '/jorLibrary' },
  { id: '4', name: '提前批', link: '/tiQianPi' },
  { id: '3', name: '位次查询', link: '/positionalQuery' },
  { id: '2', name: '分数线', link: '/scoreLine' },
  { id: '1', name: '批次线', link: '/picixian' },
];

const isTabActive = (tab) => {
  return route.path.startsWith(tab.link);
};
</script>

<style lang="scss" scoped>
#SeaCollegeTabs {
  background: #fff;
  width: 100%;
  display: flex;
  border-bottom: 1px solid rgb(242, 242, 242);
  margin-bottom: 20px;
  .tabs-nav-box {
    height: 59%;
    // padding-bottom: 20px;
  }
  .tabs-nav-box a {
    font-size: 16px;
    margin: 0 18px;
    float: left;
    border-radius: 4px 4px 0 0;
    height: 59px;
    line-height: 57px;
    background-color: #fff;
    color: #666;
    border-bottom: 3px solid transparent;
  }
  .isActive {
    border-color: red !important;
  }
}
</style>
